<template>
  <section class="component outgoing-application">
    <el-form :model="dataForm" :rules="rules" label-width="110px" ref="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：">
            <span>{{rowData.caseNumber}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次号：">
            <span>{{rowData.batchNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上牌地：">
            <span>{{rowData.boardAddress}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号：">
            <span>{{rowData.plateNum}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车库：">
            <span>{{rowData.garageName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库管：" prop="userId">
            <el-select placeholder="请选择" v-model="dataForm.userId">
              <el-option v-for="{index,realName,userId} in userList" :key="index" :label="realName" :value="userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年检到期日期：">
            <span>{{rowData.inspectionDate | dateFormat}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公里数：">
            <span>{{rowData.kilometres}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="评估价：">
            <span>{{rowData.valuationPrice}}</span>元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="VIN码：">
            <span>{{rowData.carFrameNo}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="钥匙数量：">
            <span>{{rowData.keysNumber | dictConvert('KeysNumber')}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行驶证：">
            <span>{{rowData.haveNotFlag | dictConvert('CommonFlag')}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出库类型：" prop="warehouseOutType">
            <el-select placeholder="请选择" v-model="dataForm.warehouseOutType">
              <el-option v-for="{index,name,code} in $dict.getDictData('WarehouseOutType')" :key="index" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataForm.warehouseOutType !== 'PERMANENT_OUT'">
          <el-form-item label="预计归还时间：" prop="planReturnTime">
            <el-date-picker v-model="dataForm.planReturnTime" :picker-options="pickerOptions" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注：">
        <el-input type="textarea" v-model="dataForm.remark" style="width:97%" maxlength="300" show-word-limit></el-input>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="commit" :loading="loading">确定</el-button>
    </div>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
import { CarManageService } from "~/services/domain-service/car-manage.service";
import { Dependencies } from '~/core/decorator';

@Component({
  components: {}
})

export default class OutgoingApplication extends Vue {
  @Dependencies(CarManageService)
  private carManageService: CarManageService;
  @Prop() private rowData

  private dataForm: any = {
    userId: '',
    warehouseOutType: '',
    remark: '',
    planReturnTime: '',
    id: '',
    warehouseCarStatus: 'OUT_WAREHOUSE_WAIT_APPROVED',
  }
  private loading: boolean = false
  private userList: any = []
  private rules: any = {
    userId: { required: true, message: '请选择库管' },
    warehouseOutType: { required: true, message: '请选择出库类型' },
    planReturnTime: { required: true, message: '请选择预计归还时间' }
  }
  private pickerOptions: any = {
    disabledDate: (time) => {
      return time.getTime() < Date.now() - 3600 * 1000 * 24;
    },
  }

  @Emit('close') private emitClose() {
    this.reset()
  }

  private commit() {
    this.dataForm.id = this.rowData.id
    this.dataForm.garageInfoId = this.rowData.garageInfoId
    this.dataForm.planReturnTime = this.dataForm.warehouseOutType !== 'PERMANENT_OUT' ? this.$filter.dateTimeFormat(this.dataForm.planReturnTime) : ''
    const from: any = this.$refs['dataForm']
    from.validate((valid) => {
      if (!valid) return
      this.loading = true
      this.carManageService.updateWarehouseCar(this.dataForm).subscribe(data => {
        this.closeLoading()
        this.$message.success('操作成功！')
        this.emitClose()
      }, this.closeLoading)
    })
  }

  private getUserList() {
    this.dataForm.userId = this.rowData.userId
    if (!this.rowData.garageInfoId) {
      this.userList = [];
    } else {
      this.carManageService.getGarageUsersById(this.rowData.garageInfoId).subscribe(data => {
        this.userList = data
      })
    }
  }

  private closeLoading() {
    this.loading = false
  }

  private reset() {
    const from: any = this.$refs['dataForm']
    from.resetFields()
  }
}
</script>
<style lang="less">
</style>